<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${cxt }/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>溜溜博客前台首页</title>
<link rel="stylesheet" type="text/css" href="css/frontindex.css" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	$(function() {
		/* 点击查看详情 */
		$(".detail_conent a").click(
				function() {
					//获得文章标题
					var titleid =$(this).parents(".detail_conent").prevAll(
					".detail_title").children("a").attr("titleid");
					//获得a标签里面href的值
					var url = $(this).attr("href") + "?titleid=" + titleid;
					//打开新页面带参数
					$(this).attr("href", url);
				});

		/* 点击标题查看详情 */
		$(".detail_title a").click(function() {
			//获得文章标题
			var titleid =$(this).attr("titleid");
			//获得a标签里面href的值
			var url = $(this).attr("href") + "?titleid=" + titleid;
			//打开新页面带参数
			$(this).attr("href", url);
		});
	});

	function init() {
		//书写轮播图片定时操作
		window.setInterval("changeImg()", 1000);
	}
	//书写函数
	var i = 0;

	function changeImg() {
		i++;
		//获取图片位置并设置src
		document.getElementById("img1").src = "images/s-banner" + i + ".jpg";
		if (i == 5) {
			i = 0;
		}
	}
</script>
</head>
<body onload="init()">
	<jsp:include page="header.jsp" />

	<!--图片轮播-->
	<div class="center">
		<div class="center_one">
			<img src="images/s-banner1.jpg" id="img1" />
		</div>
		<div class="center_two">
			<img src="images/2018030821053551.png"
				style="z-index: 5; float: right; margin-top: 200px;">
		</div>
		<div style="clear: both"></div>
	</div>

	<!--文章推荐-->
	<div class="display">
		<div class="display_one">
			<p style="line-height: 52px;">文章推荐</p>
			<c:forEach items="${articleList }" var="article">
				<div class="display_one_plane">
					<ul>
						<li>
							<div>
								<div class="display_image">
									<img src="images/1-1406052123280-L.jpg"
										style="width: 215px; height: 144px;">
								</div>
								<div class="display_detail">
								
									<div class="detail_title">
										<a href="detail" titleid="${article.article_id }">${article.article_title }</a>
									</div>
									<div class="detail_info">
										<span><img src="images/author.png"></span>&nbsp;&nbsp; <span><a
											href="#">${article.user_name }</a></span>&nbsp;&nbsp;&nbsp; <span>发布时间:</span>
										<span>${article.article_time }</span>&nbsp;&nbsp;&nbsp; <span>分类:</span>
										<span>${article.types_name }</span>
									</div>
									<div class="detail_conent detail_conent_p" style="height:70px;">
										<p class="detail_conent_p">${article.article_content }</p>
										<span>浏览量：</span><span>${article.article_readnumber }</span>&nbsp;&nbsp;&nbsp;
										<span>点赞数:</span><span>${article.article_supportnumber }</span>&nbsp;&nbsp;&nbsp;
										<a href="detail" class="checkdetail">查看详情</a></span>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</c:forEach>
		</div>

		<div class="display_two">
			<p style="line-height: 52px;">热门推荐</p>
			<c:forEach items="${hotRecommendList }" var="hotlist">
				<div class="display_two_plane">
					<div class="display_two_ul">
						<p style="line-height: 52px; font-size: 18px; margin-left: 8px;">${hotlist.types_name }</p>
						<ul>
							<c:forEach items="${hotlist.article_title }" var="hot"
								varStatus="go">
								<li><a href="index">${hot}</a></li>
								<hr style="border: 0.5px solid #E2DFDF;" />
							</c:forEach>
						</ul>
					</div>
					<div class="display_two_ol">
						<c:forEach items="${hotlist.article_title }" varStatus="go">
							<li>${go.count}</li>
						</c:forEach>
					</div>
				</div>
			</c:forEach>
		</div>

		<!--尾部-->
		<div class="buttom">
			<p>
				<span>Design by：llp 备案号：湘ICP备14011335号-2</span>
			</p>
		</div>
</body>

</html>